<script setup lang='ts'>
import {ref, reactive, computed} from 'vue'
import {FormRules, ElForm} from 'element-plus'
import {IconConfig} from '@/api/config'
import {Collect} from '@/util/common'
import dIcon from '@/components/dIcon.vue'
  type FormInstance=InstanceType<typeof ElForm>
const loginFormRef = ref<FormInstance>()

const props = defineProps({
  loading:{
    type:Boolean,
    required:true
  }
})

const showLoading = computed(() => {
  return props.loading
})

const emits = defineEmits(['login'])

const showPassWord = ref(false)

const onChange = () => {
  showPassWord.value = !showPassWord.value
}

const userIcon:IconConfig = {icon:'login-user', type:'custom', size:24}
const lockIcon:IconConfig = {icon:'login-password', type:'custom', size:24}
const showIcon:IconConfig = {icon:'login-password-show', type:'custom', size:24}
const hideIcon:IconConfig = {icon:'login-password-hide', type:'custom', size:24}

const rules = reactive<FormRules>({
  // username: [
  //   { required: true, message: '请输入登录账号', trigger: ['change', 'blur']},
  //   { required: true, message: '账号应是字母、数字、@、#、$、%、^、* 、_', pattern:Collect, trigger: ['change', 'blur']},
  //   { required: true, message: '账号长度小于20位', max:20, trigger: ['change', 'blur']}
  // ],
  // password: [
  //   { required: true, message: '请输入密码', trigger: ['change', 'blur'] },
  //   { required: true, message: '密码应是字母、数字、@、#、$、%、^、* 、_', pattern:Collect, trigger: ['change', 'blur'] },
  //   { required: true, message: '密码长度应为8-32位', min: 8, max: 32, trigger: ['change', 'blur']}
  // ]
})
//表单数据
const loginForm = reactive({
  phone:'13111111111',
  password:'123'
})


//表单验证
const onSubmit = () => {
  const elForm = loginFormRef.value
  if (!elForm) return
  elForm.validate((valid) => {
    if (valid && !showLoading.value) {
      emits('login', loginForm.phone, loginForm.password)
    }
    else {
      return false
    }
  })
}

</script>

<template>
  <el-form
    ref="loginFormRef"
    class="from-login"
    :rules="rules"
    :model="loginForm"
    label-width="0"
    @keyup.enter="onSubmit()"
  >
    <el-form-item prop="username">
      <el-input v-model="loginForm.phone" autofocus clearable placeholder="请输入登录账号">
        <template #prefix>
          <dIcon class="d-common-icon-theme" :icon-config="userIcon" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="loginForm.password" clearable :type="showPassWord?undefined:'password'" placeholder="请输入密码">
        <template #prefix>
          <dIcon class="d-common-icon-theme" :icon-config="lockIcon" />
        </template>
        <template #suffix>
          <dIcon class="d-common-icon-theme" :icon-config="showPassWord?hideIcon:showIcon" @click="onChange" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button v-blur type="primary" class="from-login-btn" :loading="showLoading" @click="onSubmit">
        登录
      </el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped>
.from-login-btn{
  height: 48px;
  width: 100%;
  font-size: 15px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #FFFFFF;
  margin-top: 17px;
}
</style>
<style>
.from-login .el-input{
  height: 48px;
}
.from-login .el-form-item{
  margin-bottom: var(--d-margin-level-3);
}
.from-login input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;
}
</style>